<!-- 修改密码 -->
<template>
  <el-dialog :title="dialogFormTitle"
             :model-value="dialogVisible"
             width="450px"
             :close-on-click-modal=false
             :before-close="handleClose">
    <el-form :model="ruleForm"
             :rules="rules"
             ref="ruleForm"
             label-width="100px"
             class="demo-ruleForm">
      <el-form-item label="旧密码"
                    prop="oldPassword">
        <el-input v-model="ruleForm.oldPassword"
                  placeholder="请输入旧密码"
                  type="password"
                  show-password></el-input>
      </el-form-item>
      <el-form-item label="新密码"
                    prop="onePassword">
        <el-input v-model="ruleForm.onePassword"
                  placeholder="请输入新密码"
                  type="password"
                  show-password></el-input>
      </el-form-item>
      <el-form-item label="确认密码"
                    prop="password">
        <el-input v-model="ruleForm.password"
                  placeholder="请再次输入密码"
                  type="password"
                  show-password></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   @click="onSubmit('ruleForm')">保存</el-button>
        <el-button @click="reset('ruleForm')">返回</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      ruleForm: {},
      rules: {
        oldPassword: [
          { required: true, message: '请输入旧密码', trigger: 'change' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'change' }
        ],
        onePassword: [
          { required: true, message: '请输入密码', trigger: 'change' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'change' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'change' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'change' }
        ]
      }
    }
  },
  // 父组件值(dialog(弹出层状态,弹出层Title))
  props: ['dialogFormTitle', 'dialogVisible', 'rowFrom'],
  emits: ['dialog'],
  updated () {
    this.ruleForm.username = this.rowFrom
  },
  methods: {
    /** 提交保存 */
    onSubmit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm)
          this.$axios.post('dataApi/user/modifyUserPassword.do', this.ruleForm).then((res) => {
            console.log(res)
            if (res.data.code === 200) {
              this.$message.success(res.data.msg)
              this.$emit('dialog', false)
              localStorage.clear()
              this.$router.push('/login')
            } else {
              this.$message.error(res.data.msg)
            }
          })
        } else {
          return false
        }
      })
    },
    /** 返回 */
    reset (formName) {
      this.$emit('dialog', false)
    },
    // 关闭按钮
    handleClose (done) {
      this.$emit('dialog', false)
    }
  }
}
</script>

<style lang='less' scoped>
</style>
